<template>
  <div class="verifyUserContainer" :style="diffBorderRadius">
    <!-- 手机号验证 -->
    <!-- <div id="phone" v-if="judgeVerifyWay">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="手机号">
          <el-input v-model="ruleForm.phone" disabled />
        </el-form-item>
        <el-form-item label="验证码">
          <el-input v-model="ruleForm.verifyCode" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            plain
            :disabled="isDisableCode"
            :loading="isLoading"
            @click="sendCode"
          >
            {{ sendCodeStatus ? `再次发送${isSecondes}` : "获取验证码" }}
          </el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div id="mibao" v-if="judgeVerifyWay">
      <el-form
        ref="ruleFormRef"
        :rules="rules"
        :model="modelForm"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="问题1:" style="margin-top: 10px;">
          {{ modelForm.securityQ1 }}
        </el-form-item>
        <el-form-item label="答案1:" prop="securityA1">
          <el-input 
            v-model="modelForm.securityA1" 
            @change="setAnswer('securityA1')"
          />
        </el-form-item>
        <el-form-item label="问题2:" style="margin-top: 10px;">
          {{ modelForm.securityQ2 }}
        </el-form-item>
        <el-form-item label="答案2:" prop="securityA2">
          <el-input 
            v-model="modelForm.securityA2"
            @change="setAnswer('securityA2')"
          />
        </el-form-item>
        <el-form-item label="问题3:" style="margin-top: 10px;">
          {{ modelForm.securityQ3 }}
        </el-form-item>
        <el-form-item label="答案3:" prop="securityA3">
          <el-input 
            v-model="modelForm.securityA3"
            @change="setAnswer('securityA3')"
          />
        </el-form-item>
      </el-form>
    </div>
    <!-- 人脸验证 -->
    <div class="faceVef" v-else>
      <FaceVef
        :isCameraOpen="isCameraOpen"
        :isShowMsg="false"
        :isVerifyType="true"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed, watch, onUnmounted, onMounted } from 'vue';
import type { FormInstance, FormRules } from "element-plus";
import { showMessageBox } from "@/utils/alertMsg";
// store
import useForgetPwd from "@/store/forgetPwd";
import { storeToRefs } from "pinia";
// 人脸识别组件
import FaceVef from "../../Login/components/FaceVef.vue";

const forgetPwdStore = useForgetPwd();
const {
  userInfo,
  verifyWay
} = storeToRefs(forgetPwdStore);

// const targetObj = {
//   securityQ1: "你的最喜欢的电影是什么?",
//   securityQ2: "你最喜欢的歌手或乐队是谁?",
//   securityQ3: "你最喜欢的季节是哪个?"
// }

interface IModelForm {
  securityQ1: string
  securityA1: string
  securityQ2: string
  securityA2: string
  securityQ3: string
  securityA3: string
}
const ruleFormRef = ref<FormInstance>()
const modelForm = reactive<IModelForm>({
  securityQ1: '',
  securityA1: '',
  securityQ2: '',
  securityA2: '',
  securityQ3: '',
  securityA3: ''
});

onMounted(() => {
  // 请求获取
  modelForm.securityQ1 = userInfo.value.securityQ1;
  modelForm.securityQ2 = userInfo.value.securityQ2;
  modelForm.securityQ3 = userInfo.value.securityQ3;
  // 从pinia中取出
  modelForm.securityA1 = userInfo.value.securityA1 || '';
  modelForm.securityA2 = userInfo.value.securityA2 || '';
  modelForm.securityA3 = userInfo.value.securityA3 || '';

  forgetPwdStore.setVerifySuccess(false);
})

const rules = reactive<FormRules<IModelForm>>({
  securityA1: [
    { required: true, message: '请输入问题答案!', trigger: 'blur' }
  ],
  securityA2: [
    { required: true, message: '请输入问题答案!', trigger: 'blur' }
  ],
  securityA3: [
    { required: true, message: '请输入问题答案!', trigger: 'blur' }
  ]
})

// 监听输入框改变事件
const setAnswer = (prop: string) => {
  forgetPwdStore.setAnswer(prop, modelForm[prop])
}

// 判断是密保还是人脸
const judgeVerifyWay = computed(() => {
  return verifyWay.value == "mb_verify";
});

const diffBorderRadius = computed(() => {
  return {
    borderRadius: judgeVerifyWay.value ? "50%" : "0",
    boxShadow: judgeVerifyWay.value
      ? "rgba(3, 102, 214, 0.3) 0px 0px 0px 1px"
      : "none" 
  };
});


/** 验证码开始 */
// 获取验证码是否禁用？
// let isDisableCode = ref<boolean>(false);
// // 发送验证码的状态：false:未发送 true:已发送
// let sendCodeStatus = ref<boolean>(false);
// let sendCodeTime = ref<number>(30);
// let isLoading = ref<boolean>(false);
// // 计时器
// let timer = ref(null);
// // 发送验证码
// const sendCode = () => {
//   sendCodeStatus.value = true;
//   isLoading.value = true;
//   sendCodeTime.value = 30;
//   timer.value = setInterval(() => {
//     sendCodeTime.value--;
//     if (sendCodeTime.value === 0) {
//       clearInterval(timer.value);
//       // sendCodeStatus.value = false;
//       isLoading.value = false;
//     }
//   }, 1000);
//   showMessageBox("success", "验证码已发送");
// };

// 0s就返回空
// const isSecondes = computed(() => {
//   return sendCodeTime.value === 0 ? "" : `(${sendCodeTime.value}s)`;
// });
/** 验证码结束 */
/** 手机号验证 -- 表单结束 */

/** 人脸验证 -- 开始 */
const isCameraOpen = ref<boolean>(false);

setTimeout(() => {
  isCameraOpen.value = true;
}, 1000);

onUnmounted(() => {
  if (isCameraOpen.value) {
    isCameraOpen.value = false;
  }
})

/** 人脸验证 -- 结束 */
</script>

<style scoped lang="scss">
.verifyUserContainer {
  // border: 1px solid red;
  width: 50%;
  padding: 30px 100px 50px 30px;
  margin: 10px auto;
  // border-radius: 50%;
  #phone {
    .el-form-item {
      margin: 20px 0;
    }
  }
  #mibao {

  }
  .faceVef {
    position: relative;
  }
}
</style>
